<template>
  <div>
    <div class="login-bg">

      <div class="login-main">
        <div class="login-text">
          <img src="../../assets/images/logo.png" alt="" class="logo">
          <h1 class="">欢迎你,小吃货</h1>
        </div>
        <div class="login-from">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input v-model="form.uname" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.unumber" placeholder="请输入手机号" type="number" max="11" min="11"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.upwd" placeholder="请设置密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.upwd2" placeholder="请再次确认密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" class="login-btn w-100" @click="reg()">提交注册</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-box">
          <li class="icong-box">
            <a href="">
              <div class="icon-bg">
                <i class="iconfont iconQQ"></i>
              </div>
              <p>QQ</p>
            </a>
          </li>
          <li class="icong-box">
            <a href="">
              <div class="icon-bg">
                <i class="iconfont iconweixin2"></i>
              </div>
              <p>微信</p>
            </a>
          </li>
          <li class="icong-box">
            <a href="">
              <div class="icon-bg">
                <i class="iconfont iconweibo1"></i>
              </div>
              <p>微博</p>
            </a>
          </li>
        </div>
      </div>



    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          uname: '',
          upwd: '',
          upwd2: '',
          unumber: '',
        }
      }
    },
    methods: {
      reg() {
        if (this.form.uname == "") {
          this.$message('用户名不能为空');
        } else if (this.form.upwd == "") {
          this.$message('密码不能为空');
        } else if (this.form.unumber == "") {
          this.$message('手机号能为空');
        } else if (this.form.upwd !== this.form.upwd2) {
          this.$message('两次密码不一致');
        } else {
          localStorage.setItem('sname', this.form.uname);
          localStorage.setItem('spwd', this.form.upwd);
          var $router=this.$router
          this.$message({
            message: '注册成功，请登录',
            type: 'success',
            duration:1000,
            onClose(){
             $router.push('/login')
            }
          });

        }
      }
    }
  }

</script>
<style lang="scss" scoped>

</style>
